<template>
  <div class="tabs">
    <van-tabs v-model="active" :duration="0">
      <van-tab title="包邮专区">
        <div class="nomore" v-if="!tab1.length">
          <p>该分类下暂无商品</p>
        </div>
        <van-row class="tab" v-else>
          <van-col
            span="12"
            v-for="t1 in tab1"
            :key="t1.id"
            class="tab-box"
            @click="enterDetail(t1.id)"
          >
            <img width="132" height="132" v-lazy="t1.pic" />
            <p class="tab-box_name">{{t1.name}}</p>
            <p class="tab-box_tags">{{t1.tags}}</p>
            <p class="tab-box_price">{{t1.minPrice|currency }}</p>
          </van-col>
        </van-row>
      </van-tab>
      <van-tab title="限量抢购">
        <div class="nomore" v-if="!tab2.length">
          <p>该分类下暂无商品</p>
        </div>
        <van-row class="tab" v-else>
          <van-col
            span="12"
            v-for="t2 in tab2"
            :key="t2.id"
            class="tab-box"
            @click="enterDetail(t2.id)"
          >
            <img width="132" height="132" v-lazy="t2.pic" />
            <p class="tab-box_name">{{t2.name}}</p>
            <p class="tab-box_tags">{{t2.tags}}</p>
            <p class="tab-box_price">{{t2.minPrice|currency }}</p>
          </van-col>
        </van-row>
      </van-tab>
      <van-tab title="家庭用药">
        <div class="nomore" v-if="!tab3.length">
          <p>该分类下暂无商品</p>
        </div>
        <van-row class="tab" v-else>
          <van-col
            span="12"
            v-for="t3 in tab3"
            :key="t3.id"
            class="tab-box"
            @click="enterDetail(t3.id)"
          >
            <img width="132" height="132" v-lazy="t3.pic" />
            <p class="tab-box_name">{{t3.name}}</p>
            <p class="tab-box_tags">{{t3.tags}}</p>
            <p class="tab-box_price">{{t3.minPrice|currency }}</p>
          </van-col>
        </van-row>
      </van-tab>
      <van-tab title="精选大牌">
        <div class="nomore" v-if="!tab4.length">
          <p>该分类下暂无商品</p>
        </div>
        <van-row class="tab" v-else>
          <van-col
            span="12"
            v-for="t4 in tab4"
            :key="t4.id"
            class="tab-box"
            @click="enterDetail(t4.id)"
          >
            <img width="132" height="132" v-lazy="t4.pic" />
            <p class="tab-box_name">{{t4.name}}</p>
            <p class="tab-box_tags">{{t4.tags}}</p>
            <p class="tab-box_price">{{t4.minPrice|currency }}</p>
          </van-col>
        </van-row>
      </van-tab>
      <van-tab title="本季热搜">
        <div class="nomore" v-if="!tab5.length">
          <p>该分类下暂无商品</p>
        </div>
        <van-row class="tab" v-else>
          <van-col
            span="12"
            v-for="t5 in tab5"
            :key="t5.id"
            class="tab-box"
            @click="enterDetail(t5.id)"
          >
            <img width="132" height="132" v-lazy="t5.pic" />
            <p class="tab-box_name">{{t5.name}}</p>
            <p class="tab-box_tags">{{t5.tags}}</p>
            <p class="tab-box_price">{{t5.minPrice|currency }}</p>
          </van-col>
        </van-row>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import qs from "qs";
import { currency } from "@/filters";

export default {
  data() {
    return {
      active: 0,
      tab1: [],
      tab2: [],
      tab3: [],
      tab4: [],
      tab5: []
    };
  },
  props: {},
  created() {
    this.fecthTab1();
    this.fecthTab2();
    this.fecthTab3();
    this.fecthTab4();
    this.fecthTab5();
  },
  methods: {
    fecthTab1() {
      this.$http
        .post(
          "shop/goods/list",
          qs.stringify({
            categoryId: 73423
          })
        )
        .then(res => {
          if (res.data.code == 0) {
            this.tab1 = res.data.data;
          }
        });
    },
    fecthTab2() {
      this.$http
        .post(
          "shop/goods/list",
          qs.stringify({
            categoryId: 73424
          })
        )
        .then(res => {
          if (res.data.code == 0) {
            this.tab2 = res.data.data;
          }
        });
    },
    fecthTab3() {
      this.$http
        .post(
          "shop/goods/list",
          qs.stringify({
            categoryId: 73425
          })
        )
        .then(res => {
          if (res.data.code == 0) {
            this.tab3 = res.data.data;
            console.log(this.tab3);
          }
        });
    },
    fecthTab4() {
      this.$http
        .post(
          "shop/goods/list",
          qs.stringify({
            categoryId: 73427
          })
        )
        .then(res => {
          if (res.data.code == 0) {
            this.tab4 = res.data.data;
            console.log(this.tab4);
          }
        });
    },
    fecthTab5() {
      this.$http
        .post(
          "shop/goods/list",
          qs.stringify({
            categoryId: 73428
          })
        )
        .then(res => {
          if (res.data.code == 0) {
            this.tab5 = res.data.data;
            console.log(this.tab5);
          }
        });
    },
    enterDetail(id) {
      this.$router.push({ path: `/detail/${id}` });
    }
  }
};
</script>

<style lang="less" scoped>
.tabs {
  /deep/ .van-tabs__nav {
    display: -webkit-box !important;
    display: box !important;
  }
  /deep/ .van-tabs__wrap {
    .van-tab {
      width: 20% !important;
      font-size: 16px;
      color: #333;
      z-index: 1;
    }
    .van-tabs__line {
      width: 62px !important;
      height: 6px;
      box-shadow: 0.05555556rem 0.09259259rem 0.16666667rem 0
        rgba(131, 241, 219, 0.59);
      background-image: linear-gradient(90deg, #4bfdf2 0, #4bff8f 100%),
        linear-gradient(#94ffc4, #94ffc4);
      bottom: 30px;
      z-index: 0;
    }
  }
  .tab {
    padding: 0 16px;
    &-box {
      box-shadow: 0.03703704rem 0.03703704rem 0.2037037rem 0
        rgba(206, 206, 206, 0.28);
      border-radius: 0.37037037rem;
      padding: 8px;
      img {
        margin: 0 auto;
        display: block;
      }
      &_name {
        font-size: 14px;
        color: #333;
        line-height: 30px;
      }
      &_tags {
        font: 12px/18px "微软雅黑";
        color: #999;
      }
      &_price {
        color: #f30;
        font-size: 12px;
        line-height: 16px;
      }
    }
  }
  .nomore {
    color: #aaa;
    text-align: center;
    font: 14px/22px "微软雅黑";
    padding: 10px;
  }
}
</style>
